<template>
	<div class="bgView">
		<!-- <head-bar :title="newTitle" :set="newSet" :is-back="isBack" :is-set="isSet"></head-bar> -->
		<div class="bgScored">
			<div>
				<img class="headerImg" :src="curProd.goodImage">
				<div class="grade-box">
					<div class="score">商品评分</div>
					<div class="bgImg">
						<img v-for="(star,index) in stars" v-bind:src="star.src" v-on:click="rating(index,'starts')"
							alt="星星图片" />
					</div>
				</div>
			</div>
			<div class="scoreInfo">{{scoreInfo}}</div>
		</div>
		<div class="line"></div>
		<div class="inputText">
			<textarea v-bind:maxlength="Surplus" @input="descArea" v-model="inputText" name="abstract" id="abstract"
				placeholder="宝贝满足你的期待吗？说说你的使用心得，分享给想买的他们吧！"></textarea>
			<div class="selectPic">
				<!-- <up-Load :multiple="true" :max=6 :list="imgList" ref="upload"></up-Load> -->
				<!-- 			<view class="imgMask">
				<block v-for="(item, index) in imgList" :key="index">
				  <view class='showImg'>
					<image class='img' :src='item' mode='aspectFill'></image>
					<view class='img-delete' @click='imgDelete1' :data-delindex="index">
					    <image class='img' src='../../static/delect.png' ></image>  
					</view>
				  </view>
				</block>
				<view class="img-box" @click="addPic" v-if="imgList.length<6">
					<image class="img" src='../../static/images/add.jpg'></image>
				</view>
			</view> -->
				<div class="upload-img-box">
					<div class="box" v-for="(item,index) in imgList" :key='index'>
						<img class="pre-img" :src="item" @click="previewImage(index)" alt="" />
						<img class='delete' src='https://static-c.ehsy.com/m/images/delete.png'
							@click='deleteImg(index)'>
					</div>
					<div class="box" id='fileUploadBtn' @click="addPic()" v-show="imgList.length < 1">
						<img class='upload_img' src="https://static-c.ehsy.com/m/images/addImage.png" alt="">
					</div>
				</div>
			</div>
		</div>
		<div class="bgName">
			<img src="../../static/images/sel@2x.png">
			<div class="unName">匿名</div>
		</div>
		<div class="line2"></div>
		<div class="severce">
			<div class="attitudeOfService">服务态度</div>
			<div class="bgImg">
				<img v-for="(star,index) in severceStarts" v-bind:src="star.src" v-on:click="rating(index,'severce')"
					alt="星星图片" />
			</div>
		</div>
		<div class="publish" @click="publicComment">发布</div>
	</div>
</template>

<script>
	
import { pathToBase64 } from '.../../js_sdk/mmmm-image-tools/index.js'
	// import uploadImages from '../../components/uploadImages'
	var starOffImg = '../../static/images/star02@2x.png'
	var starOnImg = '../../static/images/star@2x.png'
	export default {
		data: function() {
			return {
				userdata: {
					token: '',
					openId:''
				},
				curProd: {},
				scoreInfo: '很满意',
				inputText: '',
				Surplus: 140,
				newTitle: '商品评价',
				scoreStartNum: 5, // 商品评分
				severStartNum: 5, // 服务评分
				newSet: '     ',
				isBack: true,
				isSet: true,
				imgList: [],
				img_base64:'',
				stars: [{
						src: starOnImg,
						active: true
					}, {
						src: starOnImg,
						active: true
					}, {
						src: starOnImg,
						active: true
					},
					{
						src: starOnImg,
						active: true
					}, {
						src: starOnImg,
						active: true
					}
				],
				severceStarts: [{
						src: starOnImg,
						active: true
					}, {
						src: starOnImg,
						active: true
					}, {
						src: starOnImg,
						active: true
					},
					{
						src: starOnImg,
						active: true
					}, {
						src: starOnImg,
						active: true
					}
				]
			}
		},
		components: {
			// 'head-bar': Headbar,
			// 'up-Load': uploadImages
		},
		onLoad(e) {
			//调用方法，获取轮播图数据
			// console.log(e,'e');
			// this.getSwiperList()
			const item = JSON.parse(decodeURIComponent(e.item))
			this.curProd = item
			console.log(this.curProd);
			// this.businessId=e.businessId
			// this.goodId=e.goodId
			this.getStorage()
			console.log(this.getNowFormatDate());
			let i = new Date(this.getNowFormatDate())
			console.log(i);
			// console.log(this.userdata.token, 'token')
			// console.log(this.curProd.orderId,'order');
		},
		methods: {
			//获取当前日期函数
			getNowFormatDate() {
				let date = new Date(),
					year = date.getFullYear(), //获取完整的年份(4位)
					month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
					strDate = date.getDate() // 获取当前日(1-31)
				if (month < 10) month = `0${month}` // 如果月份是个位数，在前面补0
				if (strDate < 10) strDate = `0${strDate}` // 如果日是个位数，在前面补0

				return `${year}-${month}-${strDate}`
			},

			// 评分
			rating: function(index, string) {
				if (string === 'starts') {
					var total = this.stars.length // 星星总数
					var idx = index + 1 // 这代表选的第idx颗星-也代表应该显示的星星数量
					// 进入if说明页面为初始状态
					if (this.scoreStartNum === 0) {
						this.scoreStartNum = idx
						for (var i = 0; i < idx; i++) {
							this.stars[i].src = starOnImg
							this.stars[i].active = true
						}
					} else {
						// 如果再次点击当前选中的星级-仅取消掉当前星级，保留之前的。
						if (idx == this.scoreStartNum) {
							for (var i = index; i < total; i++) {
								if (i != 0) {
									this.stars[i].src = starOffImg
									this.stars[i].active = false
								}
							}
						}
						// 如果小于当前最高星级，则直接保留当前星级
						if (idx < this.scoreStartNum) {
							for (var i = idx; i < this.scoreStartNum; i++) {
								if (i != 0) {
									this.stars[i].src = starOffImg
									this.stars[i].active = false
								}
							}
						}
						// 如果大于当前星级，则直接选到该星级
						if (idx > this.scoreStartNum) {
							for (var i = 0; i < idx; i++) {
								this.stars[i].src = starOnImg
								this.stars[i].active = true
							}
						}
						var count = 0 // 计数器-统计当前有几颗星
						for (var i = 0; i < total; i++) {
							if (this.stars[i].active) {
								count++
							}
						}
						this.scoreStartNum = count
					}
					if (this.scoreStartNum === 1) {
						this.scoreInfo = '很差'
					} else if (this.scoreStartNum === 2) {
						this.scoreInfo = '差'
					} else if (this.scoreStartNum === 3) {
						this.scoreInfo = '一般'
					} else if (this.scoreStartNum === 4) {
						this.scoreInfo = '满意'
					} else if (this.scoreStartNum === 5) {
						this.scoreInfo = '很满意'
					}
				} else {
					var total = this.severceStarts.length // 星星总数
					var idx = index + 1 // 这代表选的第idx颗星-也代表应该显示的星星数量
					// 进入if说明页面为初始状态
					if (this.severStartNum == 0) {
						this.severStartNum = idx
						for (var i = 0; i < idx; i++) {
							this.severceStarts[i].src = starOnImg
							this.severceStarts[i].active = true
						}
					} else {
						// 如果再次点击当前选中的星级-仅取消掉当前星级，保留之前的。
						if (idx === this.severStartNum) {
							for (var i = index; i < total; i++) {
								if (i != 0) {
									this.severceStarts[i].src = starOffImg
									this.severceStarts[i].active = false
								}
							}
						}
						// 如果小于当前最高星级，则直接保留当前星级
						if (idx < this.severStartNum) {
							for (var i = idx; i < this.severStartNum; i++) {
								if (i != 0) {
									this.severceStarts[i].src = starOffImg
									this.severceStarts[i].active = false
								}
							}
						}
						// 如果大于当前星级，则直接选到该星级
						if (idx > this.severStartNum) {
							for (var i = 0; i < idx; i++) {
								this.severceStarts[i].src = starOnImg
								this.severceStarts[i].active = true
							}
						}
						var count = 0 // 计数器-统计当前有几颗星
						for (var i = 0; i < total; i++) {
							if (this.severceStarts[i].active) {
								count++
							}
						}
						this.severStartNum = count
					}
				}
			},
			descArea() {
				//console.log(this.inputText);
				//var textVal = this.introduct.length
				//this.Surplus = 200 - textVal
			},
			// 发布评论
			publicComment() {
				// this.scoreStartNum 代表商品评分
				// this.severStartNum 代表服务态度
				// this.inputText  代表心得
				// base64的图片流直接传给服务端，服务端传给阿里云，也可前端直接上传，拿到url链接上传到服务端。
				// let curDate=this.getNowFormatDate()
				let content= this.inputText
				let image= this.imgList[0]
				let date=this.getNowFormatDate()
				let score= this.scoreStartNum
				this.$myRequest({
					url: '/user/userComment?orderId='+this.curProd.orderId+'&content='+content+'&date='+date+'&score='+score,
					method: 'PUT',
					data:{
					},
					header: {
						Authorization: this.userdata.token,
						// 'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						image:this.img_base64
						// activityId:this.curProd.activityId,
						// businessId: this.curProd.businessId,
						// goodId: this.curProd.goodId,
						// orderId: this.curProd.orderId,
						// openId: this.userdata.openId,
					},
				}).then(res=>{
					uni.showToast({
						title: '评论成功',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'success',
						//显示持续时间为 2秒
						duration: 1500,
						success() {
							// uni.navigateTo({
							// 	url:'/pages/myorder/myorder?sts=0'
							// })
							uni.navigateBack()
						}
					})
				})
			},
			//*选择图片*//
			addPic: async function() {
				let that = this
				uni.chooseImage({
					count: 1, // 最多可以选择的图片张数，默认9
					sizeType: ['compressed'], // original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
					success: function(res) {

						uni.getImageInfo({
							src: res.tempFilePaths[0],
							success: (path) => {
								pathToBase64(path.path).then(base64 => {
									   that.img_base64=base64
									   // console.log(that.img_base64,'-')
								})
								.catch(error => {
									console.error(error)
								})
							}
						})

						if (that.imgList.length === 0) {
							that.imgList = res.tempFilePaths
						} else if (that.imgList.length <= 1) {
							// that.imgList = that.imgList.concat(res.tempFilePaths); //concat追加到数组
							that.imgList = [...that.imgList, ...res.tempFilePaths]
						}
					}
				})
			},
			deleteImg: function(index) {
				var _this = this
				// _this.totalImg.splice(index,1)
				_this.imgList.splice(index, 1)
			},
			previewImage: function(index) {
				var _this = this
				let imgSrc = _this.imgList
				uni.previewImage({
					current: _this.imgList[index],
					urls: imgSrc,
					// #ifdef APP-PLUS
					loop: true,
					indicator: 'number',
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log(data);
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					},
					// #endif
				})

			},
			async getStorage() {
				const openId = uni.getStorageSync('openId')
				const token = uni.getStorageSync('token')
				this.userdata.openId = openId
				this.userdata.token = token
			},

		},

		name: 'gotoComment'
	}
</script>

<style>
	.bgView {
		padding: 15px 15px;
	}

	.headerImg {
		width: 4.8125rem;
		height: 4.8125rem;
	}

	.score {
		color: #333333;
		font-size: .875rem;
		margin-left: 10px;
		display: inline-block;
	}

	.bgScored {
		position: relative;
		margin-top: -15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;
	}

	.bgImg img {
		margin-left: 5px;
		width: 1.09375rem;
		height: 1.03125rem;
	}

	.grade-box {
		position: absolute;
		top: 1.6875rem;
		left: 5.0275rem;
		display: inline-block;
	}

	.bgImg {
		display: inline-block;
		margin-left: 5px;
	}

	.line {
		margin-top: -5px;
		margin-left: -23px;
		margin-right: -23px;
		background: #c4c3c3;
		height: 1px;
		opacity: 0.3;
	}

	.scoreInfo {
		color: #999999;
		font-size: .75rem;
	}

	.inputText {
		width: 100%;
		margin-top: 10px;
		border-bottom: 1px solid #eef1f5;
	}

	.inputText textarea {
		width: 100%;
		height: 5.5rem;
		/*outline: none;*/
		/*overflow:auto;*/
		border: none;
		font-size: .75rem;
		/*background-attachment:fixed;*/
		/*background-repeat:no-repeat;*/
		/*border-style:solid;*/
		/*border-color:#FFFFFF*/
	}

	.selectPic {
		margin-top: 10px;
		width: 100%;
	}

	/* .selectPic   .imgMask{
    position: absolute;
    height: 100%;
    width:100%;
    top:0px;
    left:0;
    z-index: 100;
	background:red;
  } */
	.showImg {
		height: 100%;
		width: 100%;
		position: absolute;
		align-items: center;
		left: 0px;
		top: 100rpx;
	}

	.img {
		object-fit: scale-down;
		height: 200rpx;
		width: 200rpx;
	}





	.unName {
		display: inline-block;
		color: #333333;
		margin-left: 5px;
		vertical-align: middle;
		font-size: .75rem;
	}

	.bgName {
		width: 100%;
		height: 50px;
		line-height: 50px;
		display: flex;
		align-items: center;
	}

	.bgName img {
		width: 17px;
		height: 17px;
	}

	.line2 {
		margin-top: -5px;
		margin-left: -23px;
		margin-right: -23px;
		background: #c4c3c3;
		height: 8px;
		opacity: 0.3;
	}

	.attitudeOfService {
		color: #333333;
		font-size: .875rem;
		display: inline-block;
	}

	.severce {
		display: flex;
		height: 60px;
		align-items: center;
	}

	.publish {
		width: 100%;
		height: 40px;
		background: #3fc9a5;
		color: white;
		font-size: .875rem;
		border-radius: 20px;
		line-height: 40px;
		text-align: center;
	}








	.upload-img-box {
		width: 100%;
		overflow: hidden;
	}

	.upload-img-box .box {
		width: 25%;
		height: 0;
		padding-bottom: 25%; //   
		float: left;
		margin-top: 30px;
		text-align: center;
		position: relative;

	}

	.upload-img-box .box .delete {
		z-index: 5;
		width: 28%;
		height: 28%;
		position: absolute;
		top: -12%;
		left: 72%;
	}

	.upload-img-box .box .pre-img {
		left: 50%;
		top: 0;
		width: 150rpx;
		height: 150rpx;
		transform: translateX(-50%);
		position: absolute;
	}

	.upload-img-box .box .upload_img {
		width: 150rpx;
		height: 150rpx;
	}
</style>